<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="__STATIC__/css/font.css">
    <link rel="stylesheet" href="__STATIC__/css/xadmin.css">
    <script type="text/javascript" src="__STATIC__/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="__STATIC__/js/xadmin.js"></script>
    <script type="text/javascript" src="__STATIC__/lib/UEditor/ueditor.config.js"></script>
    <script type="text/javascript" src="__STATIC__/lib/UEditor/ueditor.all.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=9BmNG0EcpzxAPCzSNOISnz0aEqi4jXuM"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .images{float: left;margin-right: 10px;}
        .images>a>i{position: absolute;right: 3px;top: 3px;}
        .image>a>i{position: absolute;right: 3px;top: 3px;}
        .range{padding: 0 0 0 0;margin-right: 10px;}
        .range>span{font-size: 20px;padding: 0 5px 0 5px;}
        .driver .layui-anim-upbit{z-index: 1000;}
        /*.cityDel{position: absolute;right: -5px;top: -5px;font-size: 5px;color: #0C0C0C;}*/
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="form1">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>商品名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="good_name" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="">
                    {:token()}
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>商品封面
                </label>
                <div class="layui-upload-drag image" id="image" style="width: 168px;">
                    <i class="layui-icon" style="font-size: 40px;">&#xe67c;</i>
                    <p>点击上传</p>
                </div>
            </div>
            <div class="layui-form-item" id="imgs">
                <label class="layui-form-label">
                    <span class="x-red">*</span>学员风采
                </label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" id="images" style="width: 168px;">
                        <i class="layui-icon" style="font-size: 40px;">&#xe67c;</i>
                        <p>点击上传</p>
                        <p>最多可上传10张图片</p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>招生范围
                </label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" style="padding: 0 0 0 0;">
                        <a class="city-type">
                            <i class="layui-icon" style="font-size: 25px;">&#xe654;</i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>位置信息
                </label>
                <div class="layui-input-inline" style="width: 230px;">
                    <input type="text" id="address" name="address" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="">
                    <input type="hidden" id="lng" name="lng" value="">
                    <input type="hidden" id="lat" name="lat" value="">
                </div>
                <div class="layui-input-inline">
                    <div id="container" style="width: 600px;height: 350px;border: 1px solid #999999;margin-left: 100px;"></div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    <span class="x-red">*</span>驾照类型
                </label>
                <div class="layui-input-inline driver">
                    <select name="driver_id" lay-verify="required">
                        <option value=""></option>
                        {volist name="driver" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">产品说明</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content"
                              placeholder="请输入内容"
                              style="width: 90%;height: 600px;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">注意事项</label>
                <div class="layui-input-block">
                    <textarea name="note" id="note"
                              placeholder="请输入内容"
                              style="width: 90%;height: 600px;"></textarea>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    首页展示
                </label>
                <div class="layui-input-inline">
                    <input type="radio" name="is_home" value="1" title="是" checked>
                    <input type="radio" name="is_home" value="0" title="否">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    状态
                </label>
                <div class="layui-input-inline">
                    <input type="radio" name="status" value="1" title="正常" checked>
                    <input type="radio" name="status" value="0" title="禁用">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    商品价格
                </label>
                <div class="layui-input-inline">
                    <input type="number" name="price" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    划线价格
                </label>
                <div class="layui-input-inline">
                    <input type="number" name="old_price" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    排序
                </label>
                <div class="layui-input-inline" style="width: 100px;">
                    <input type="number" name="sort" required="" lay-verify="required"
                           autocomplete="off" class="layui-input" value="0">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                </label>
                <button  class="layui-btn" lay-filter="add" lay-submit="">
                    保存
                </button>
            </div>
        </form>
    </div>
</div>
<form class="layui-form" id="form2" hidden>
    <div class="layui-form-item" style="margin-left: 10px;">
        {volist name="range" id="vo"}
        <div class="layui-input-inline" style="width: 100px;">
            <input type="checkbox" name="range_id[]" value="{$vo.id}" data-title="{$vo.name}" title="{$vo.name}" class="layui-input">
        </div>
        {/volist}
    </div>
</form>
<script>
    layui.use(['form','layer','upload'],function() {
        $ = layui.jquery;
        let form = layui.form,
            upload = layui.upload,
            layer = layui.layer;
        var ue = UE.getEditor('content');
        ue.addListener("contentChange", function () {
            $("#content").val(ue.getContent());
        });
        var ue2 = UE.getEditor('note');
        ue2.addListener("contentChange", function () {
            $("#note").val(ue2.getContent());
        });

        var map = new BMap.Map("container");
        map.centerAndZoom("西安市",11);
        var heng=$("#lng").val()?$("#lng").val():108.95365172522085;
        var zong=$("#lat").val()?$("#lat").val():34.27618396187369;
        var marker = new BMap.Marker(new BMap.Point(heng,zong));
        var geoc = new BMap.Geocoder();
        map.addOverlay(marker);
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());
        //单击获取点击的经纬度
        map.addEventListener("click",function(e){
            map.clearOverlays();
            var pt = e.point;
            $("#lng").val(e.point.lng);
            $("#lat").val(e.point.lat);
            geoc.getLocation(pt, function(rs){
                var addComp = rs.addressComponents;
                $("input[name='address']").val(addComp.province + addComp.city + addComp.district + addComp.street + addComp.streetNumber);
                // alert(addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber);
            });
            // 百度地图API功能
            var point = new BMap.Point(e.point.lng,e.point.lat);
            var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat)); // 创建点
            //添加覆盖物
            map.addOverlay(marker);            //增加点
        });
        $("#address").blur(function(){
            // 创建地址解析器实例
            var data = $("#address").val();
            var myGeo = new BMap.Geocoder();
            // 将地址解析结果显示在地图上,并调整地图视野
            myGeo.getPoint(data, function(point){
                if (point) {
                    map.centerAndZoom(point, 16);
                    $("#lng").val(point.lng);
                    $("#lat").val(point.lat);
                    map.addOverlay(new BMap.Marker(point));
                }else{
                    alert("您输入地址没有解析到结果!");
                }
            }, "西安市");
        });
        //上传
        upload.render({
            elem: '#image'
            ,url: '{:url("goodsImg")}'
            ,done: function(res){
                if (res.code !== 1){
                    layer.msg(res.msg, {icon: 5,time:1000},function () {
                        return false;
                    });
                }
                let dome = '<img src="'+ res.url +'" alt="..." style="width: 168px;height: 75px;">\n' +
                    '<input type="hidden" name="image" value="'+ res.url +'">\n' +
                    '<a class="imgDel" data-type="1" data-src="'+ res.url +'">\n' +
                    '<i class="layui-icon layui-icon-close-fill" style="font-size: 20px;color: #0C0C0C;"></i>\n' +
                    '</a>';
                $('#image').children().remove();
                $('#image').append(dome);
                form.render();
            }
        });
        //多图上传
        upload.render({
            elem: '#images'
            ,url: '{:url("goodsImg")}'
            ,before: function(obj){
                let length = $('#imgs').children('.layui-input-block').children('.images').length;
                if (length >10){
                    layer.msg('最多只能上传10张图片', {icon: 5,time:1000},function () {
                        return false;
                    });
                }
            }
            ,done: function(res){
                if (res.code !== 1){
                    layer.msg(res.msg, {icon: 5,time:1000},function () {
                        return false;
                    });
                }
                let dome = '<div class="layui-upload-drag images">\n' +
                        '<img src="'+ res.url +'" alt="..." style="width: 168px;height: 75px;">\n' +
                        '<input type="hidden" name="images[]" value="'+ res.url +'">\n' +
                        '<a class="imgDel" data-type="2" data-src="'+ res.url +'">\n' +
                        '<i class="layui-icon layui-icon-close-fill" style="font-size: 20px;color: #0C0C0C;"></i>\n' +
                        '</a>\n' +
                    '</div>';
                $('#images').before(dome);
                form.render();
            }
        });
        //删除图片
        $(document).on('click','.imgDel',function () {
            var that = $(this);
            $.post('{:url("goodsImgDel")}',{imgUrl:that.attr('data-src')},function (res) {
                if (res.code !== 1){
                    layer.msg(res.msg, {icon: 5,time:1000},function () {
                        return false;
                    });
                }else {
                    if (that.attr('data-type') == 1){
                        var dome = '<i class="layui-icon" style="font-size: 40px;">&#xe67c;</i>\n' +
                            '<p>点击上传</p>';
                        $('#image').children().remove();
                        $('#image').append(dome);
                        form.render();
                    }else {
                        that.parent().remove();
                        form.render();
                    }
                    layer.msg(res.msg, {icon: 6,time:1000});
                }
            })
        });
        //选择添加招生范围
        $(document).on('click','.city-type',function () {
            layer.open({
                type: 1,
                title:'加菜',
                content:$('#form2'),
                btn:['确认','取消'],
                yes:function (index, layero) {
                    var data = $('#form2').serializeArray();
                    $('.city-type').parent().siblings('.range').remove();
                    for (var i=0;i<data.length;i++){
                        var id = data[i].value;
                        data[i].title = $('#form2 input[value="'+id+'"]').attr('data-title');
                        var dome =  '<div class="layui-upload-drag range">\n' +
                            '<span>'+ data[i].title +'</span>\n' +
                            '<input type="hidden" name="range_id[]" value="'+ id +'"> \n' +
                            '</div>';
                        $('.city-type').parent().before(dome);
                    }
                    form.render();
                    layer.close(index);
                }
            });
        });
        //监听提交
        form.on('submit(add)',function(data) {
            //发异步，把数据提交给php
            $.post('{:url("goodsAdd")}', data.field, function (res) {
                if (res.code == 1){
                    layer.msg(res.msg, {icon: 6,time:1000},function () {
                        xadmin.close();
                        xadmin.father_reload();
                    });
                }else {
                    layer.msg(res.msg, {icon: 5,time:1500});
                }
            });
            return false;
        });
    });
</script>
</body>

</html>
